<script lang="ts">

export default {
    name: 'Person'
}

</script>

<script lang="ts" setup>

import { ref, reactive, watch, watchEffect } from 'vue'

// 监视多个内容的话 可以不需要直接书写这种形式的内容 

// 但是vue中的watch参数是什么用处我有点不清楚啊

let tem = ref(0)
let hei = ref(0)

const changeTem = () => {
    tem.value += 10;
}

const changeHei = () => {
    hei.value += 10
}


// 引用数据类型也就是对象类型的可以直接写但是建议写成()=>{}

// 这个位置中tem是一个基本数据类型的响应式数据对象那么这里就直接
// 再参数位置上写tem即可 回调函数中传入的是新值
watch(tem,(newValue)=>{
    console.log(newValue)
    if(newValue >= 60 ){
        console.log("警告")
    }
})
</script>
<template>
    <div class="person">
        <span>水温{{ tem }}℃</span>
        <span>水位{{ hei }}米</span>
        <button @click="changeTem">按钮一</button>
        <button @click="changeHei">按钮二</button>
    </div>
</template>
<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0px 5px;
}
</style>